<template>
	<view>
		<!-- 背景图 -->
		<view>
			<image src="../../static/bg.png" style="position: absolute; top:0;bottom:110rpx;left:0;right:0;width: 100%; height: 100%; z-index: -1" ></image>
		</view>
		
		<!-- 页签选择 -->
		<view style="display: flex; padding-top: 20rpx; justify-content: space-around; height: 70rpx;">
			<view @click="changeLable('current')" style="color: #D4D4D4; font-size: 25rpx;  width: 120rpx">
				<view  :class="cur_lable_name == 'current'? 'selectedLable':''">当前订单</view>
				<view v-if="cur_lable_name=='current'" style="margin-top: -10rpx;color: #D0B48E;">————</view>
			</view>
			<view @click="changeLable('history')" style="color: #D4D4D4; font-size: 25rpx; width: 120rpx;">
				<view  :class="cur_lable_name == 'history'? 'selectedLable':''">历史订单</view>
				<view v-if="cur_lable_name=='history'" style="margin-top: -10rpx;color: #D0B48E;">————</view>
			</view>
		</view>
		
		<!-- 订单框 -->
		<view class="">
			<!-- 第一个框 -->
			<view class="orderlist" @click="EnterDetailPage">
				<view  style="display: flex">
					<view  style="color: #D5D5D5; margin-left: 25rpx; margin-top: 20rpx; font-size: 25rpx; display: flex;">
						匹配时间: 
					</view>
					<view class="font_bold" style="color: #FEFEFE; font-size: 20rpx; margin-left: 20rpx; margin-top: 20rpx;">
						2021-12-25 20:00:50
					</view>
					
					<view style="color: #FEFEFE; font-size: 15rpx; margin-top: 15rpx; border: 2rpx #BFBFBF solid;
					width:100rpx ; height: 35rpx; margin-left: auto; margin-right: 25rpx ; display: flex; justify-content: center;">
						查看详情
					</view>
				</view>
				
				<view  style="display: flex;">
					<view  style="color: #D5D5D5; margin-left: 25rpx;font-size: 25rpx;display: flex; align-items: flex-start; margin-top: 10rpx;">
						匹配玩家: 
					</view>
					<view class="font_bold" style="color: #FEFEFE; font-size: 20rpx; margin-left: 30rpx;margin-top: 15rpx;">
						是小仙女啊
					</view>
				</view>
				<!-- 下半区 -->
				<view  style=" width: 670rpx;  height: 30rpx;  margin-left: 6rpx; margin-right: 6rpx; background-color: #FFFFFF;margin-top: 30rpx;">
					<view style="font-size: 15rpx; padding-left: 19rpx; color: #404040; display: flex; align-items: center;">
						<view>
							订单编号: 
						</view>
						<view style="font-size: 15rpx; margin-left: 15rpx; color: #404040;">
							13803461779215345234234
						</view>
					</view>
					
				</view>
				
				<!-- 加一个圆切出 -->
				<!-- <view  style="margin-top: -105rpx; ">
					<view  style="display: flex; justify-content: space-between">
					<view  style="width: 40rpx;height: 40rpx;margin-top: 87rpx;margin-left: -18rpx; background: #FFFFFF;border-radius: 1em;z-index: 2;*/"> </view>
					<view  style="width: 40rpx;height: 40rpx;margin-top: 87rpx;margin-right: -13rpx;background: #FFFFFF;border-radius: 1em;z-index: 2;*/"> </view>
				</view>
				
				</view> -->
			</view>
			
			
			
			
			
			
			
			
		</view>
		
		
		
		
		<!-- 自定义底部导航栏 -->
		<!-- <view class="flex" style="height: 110rpx; position: fixed; left: 0rpx;right: 0rpx; bottom: 0rpx;
		justify-content: center;align-items: center;background-color: #111111;">
			<view @click="enter_page('test_index')" class="flex iconfont icon-shouye font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page('order/order')" class="flex iconfont icon-faxian font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page(3)" class="flex iconfont icon-xiaoxi font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page(4)" class="flex iconfont icon-geren font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前所在标签页
				cur_lable_name:"current"
			}
		},
		methods: {
			// enter_page(path){
			// 	console.log(path)
			// 	uni.navigateTo({
			// 		url:path
			// 	})
			// },
			EnterDetailPage(){
				uni.navigateTo({
					url:"./order_detail"
				})
			},
			changeLable(lable_name){
				this.cur_lable_name = lable_name
			}
		}
	}
</script>
<style>
.selectedLable{
	color: #D0B48E;
}

.orderlist{
	margin-top: 25rpx; margin-left: 40rpx; width: 680rpx;height: 170rpx;
	background-color: #111111;
	border-top-left-radius: 30rpx;
	/* line-height: 100px;display: block;text-align: center;background-image: radial-gradient(200px at -10px 100px, #fff 50px, #4169E1 50px);background-image: radial-gradient(200px at -10px 100px, #fff 50px, #4169E1 50px); */
}
</style>



